<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <p>
                数字1：<input type="text" v-model.number="num1">
            </p>
            <p>
                +
            </p>
            <p>
                数字2：<input type="text" v-model.number="num2">
            </p>
            <p>
                = {{result}}
            </p>
        </div>

        <div>
            姓：<input type="text" v-model="firstName">
            名：<input type="text" v-model="lastName"><br>
            全名：<input type="text" v-model.lazy="fullName">{{fullName}}
        </div>

    </div>


</body>
<script src=" https://cdn.jsdelivr.net/npm/vue@2.6.14">
</script>
<script>

    // 实例化Vue对象
    let app = new Vue({
        el: '#app',         // Vue对象在页面中的作用容器
        // 当前Vue对象设置的默认数据
        data: {
            num1: 0,
            num2: 0,
            // result: 0
            firstName: '',
            lastName: ''
        },
        // 使用生命周期
        // beforeCreate: function () {
        //     this.test()
        // },
        // mounted: function () {

        // },

        // methods是当前应用定义的函数方法
        methods: {
            add: function () {
                this.result = this.num1 + this.num2
            }

        },
        // 计算属性
        computed: {
            result: function () {
                return this.num1 + this.num2
            },
            // fullName: function () {
            //     return this.firstName + this.lastName
            // }
            fullName: {
                // geter是函数中相关的值发生改变时就会执行
                get: function () {
                    return this.firstName + this.lastName
                },
                // seter是当前属性（值）发生改变就会执行
                set: function (newVal) {
                    // console.log(newVal)
                    let arr = newVal.split(' ')
                    console.log(arr)
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }


    })


</script>

</html>